<template>
  <div class="share-container">
    <standard-table :table-data="shareData" :table-head="shareHead" :pagination="false">
      <div class="file-size" slot="name" slot-scope="{ record }" @click="getCurrentDirList(record.id)">
        <a-icon type="file" theme="twoTone" />
        <span v-if="record.type !== 'dir'">{{ record.name }}.{{ record.type }}</span>
        <span v-else>{{ record.name }}</span>
      </div>
      <div slot="action" slot-scope="{ text, record }">
        <a-space>
          <a-button type="primary" size="small" @click="downloadShare(record)">
            下载
          </a-button>
          <a-button type="primary" size="small" @click="saveAsMe(record)">
            保存到我的网盘
          </a-button>
        </a-space>
      </div>
    </standard-table>
    <a-modal v-model="shareCodeModalVisible" title="请输入提取码" @ok="confirmShareCode">
      <a-form-model :model="confirmShareCodeForm">
        <a-form-model-item>
          <a-input v-model="confirmShareCodeForm.shareCode"></a-input>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <!--    保存到我自己打网盘-->
    <a-modal
      title="保存到我的网盘"
      :visible="saveAsMeModalVisible"
      @ok="saveAsMeModalVisible = false"
      @cancel="saveAsMeModalVisible = false"
    >
      <a-directory-tree :treeData="myDirTreeData" :replaceFields="replaceFields"> </a-directory-tree>
    </a-modal>
  </div>
</template>

<script>
import { message } from 'ant-design-vue';
import StandardTable from '@/components/standardTable';
export default {
  name: 'share',
  components: { StandardTable },
  data() {
    return {
      shareCodeModalVisible: false,
      confirmShareCodeForm: {
        shareCode: '',
        shareLink: ''
      },
      shareData: [],
      shareHead: [
        {
          title: '文件名',
          dataIndex: 'name',
          scopedSlots: { customRender: 'name' },
          width: 500
        },
        {
          title: '文件大小',
          dataIndex: 'size'
        },
        {
          title: '操作',
          dataIndex: 'id',
          scopedSlots: { customRender: 'action' }
        },
        {
          title: '最后修改时间',
          dataIndex: 'modifyTime',
          ellipsis: true
        }
      ],
      saveAsMeModalVisible: false,
      myDirTreeData: [],
      replaceFields: {
        children: 'children',
        title: 'name',
        slots: { type: 'root' },
        key: 'id'
      },
    };
  },
  created() {
    this.needShareCode();
  },
  methods: {
    needShareCode() {
      const url = this.$route.path;
      let shareLink = url.split('/');
      this.$store
        .dispatch('share/needShareCode', shareLink[2])
        .then(res => {
          console.log('是否需要提取码', res);
          this.shareCodeModalVisible = res;
          if (!res) {
            this.getShareFileList(shareLink[2]);
          } else if (res) {
            this.confirmShareCode;
          }
        })
        .catch(reason => {
          console.log(reason);
        });
    },
    confirmShareCode() {
      const url = this.$route.path;
      let shareLink = url.split('/');
      this.getShareFileList(shareLink[2]);
    },
    getShareFileList(shareLink) {
      const shareCode = this.confirmShareCodeForm.shareCode;
      this.$store
        .dispatch('share/getShare', { shareLink, shareCode })
        .then(res => {
          console.log('提取码是否正确', res);
          if (res) {
            this.shareCodeModalVisible = false;
            this.shareData = res;
          } else {
            this.$message.error('提取码错误');
            console.log('提取码错误');
          }
        })
        .catch(reason => {
          message.error(reason);
          console.log(reason);
        });
    },
    getShare() {
      this.$store
        .dispatch('share/getShare', {})
        .then(res => {
          console.log('获取分享列表', res);
        })
        .catch(reason => {
          console.log('获取分享列表失败', reason);
        });
    },
    downloadShare(record) {
      console.log('下载分享文件', record);
      console.log('单个文件下载', record);
      this.$http
        .getBlob('tran/download/' + record.id)
        .then(result => {
          const url = window.URL.createObjectURL(new Blob([result]));
          const link = document.createElement('a');
          link.style.display = 'none';
          link.href = url;
          console.log(link);
          if (record.type === 'dir') {
            link.setAttribute('download', record.name + '.' + 'zip');
          } else {
            link.setAttribute('download', record.name + '.' + record.type);
          }

          document.body.appendChild(link);
          link.click();
        })
        .catch(err => {
          console.log(err);
        });
    },
    saveAsMe() {
      this.saveAsMeModalVisible = true;
      this.getDirTree();
    },
    getDirTree() {
      console.log('获取目录树');
      const userId = this.$store.state.user.accountInfo.userId;
      this.$store
        .dispatch('dir/dirTree', { userId })
        .then(res => {
          console.log(res[1]);
          this.myDirTreeData = res;
        })
        .catch(reason => {
          console.log(reason);
        });
    }
  }
};
</script>

<style scoped>
.share-container {
  padding: 24px;
  background: #f0f2f5;
}
</style>
